<script setup lang="ts">
import { reactive, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean, Array],
    default: () => null
  },
  label: {
    type: String,
    default: () => ''
  },
  clearable: {
    type: Boolean,
    default: () => true
  },
  multiple: {
    type: Boolean,
    default: () => false
  },
  list: {
    type: Array,
    default: () => []
  },
  option: {
    type: Object,
    default: () => { }
  },
  collapseTags: {
    type: Boolean,
    default: () => false
  },
  disabled: {
    type: Boolean,
    default: () => false
  }
})

const emit = defineEmits(['update:modelValue'])

const state = reactive({
  data: props.list as any,
  inputValue: props.modelValue ? props.modelValue : ''
})

const change = () => {
  emit('update:modelValue', state.inputValue)
}

watch(
  () => props.modelValue,
  (val: any) => {
    state.inputValue = val
  }
)

watch(
  () => props.list,
  (val: any) => {
    state.data = val
  }
)
</script>

<template>
  <el-select class="!w-full" filterable v-model="state.inputValue" :clearable="props.clearable" :disabled="props.disabled"
    :placeholder="'请选择' + props.label" :multiple="props.multiple" :collapse-tags="props.collapseTags"
    :collapse-tags-tooltip="props.collapseTags" @change="change">
    <el-option :key="j" v-for="(i, j) in state.data" :label="i[props.option?.label || 'label']"
      :value="i[props.option?.value || 'value']" :disabled="i?.disabled || false" />
  </el-select>
</template>

<style lang="scss" scoped></style>
